<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = 200;
        const R = 80;
        const arrowLength = 10;

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw an arrowhead
        function drawArrowhead(toX, toY, angle) {
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - arrowLength * Math.cos(angle - Math.PI / 6), toY - arrowLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - arrowLength * Math.cos(angle + Math.PI / 6), toY - arrowLength * Math.sin(angle + Math.PI / 6));
        }
        
        // --- Drawing ---

        // 1. Draw Axes
        ctx.beginPath();
        // X-axis
        ctx.moveTo(cx - 1.5 * R, cy);
        ctx.lineTo(cx + 1.5 * R, cy);
        drawArrowhead(cx + 1.5 * R, cy, 0);
        // Y-axis
        ctx.moveTo(cx, cy + 1.5 * R);
        ctx.lineTo(cx, cy - 1.5 * R);
        drawArrowhead(cx, cy - 1.5 * R, -Math.PI / 2);
        ctx.stroke();

        // 2. Draw Dashed line (along x-axis inside the circle)
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(cx - R * 1.2, cy);
        ctx.lineTo(cx + R * 1.2, cy);
        ctx.stroke();
        ctx.restore();

        // 3. Draw Disk (Circle)
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Draw Labels on Axes and Points
        ctx.fillText('x', cx + 1.5 * R + 15, cy);
        ctx.fillText('y', cx, cy - 1.5 * R - 15);
        ctx.fillText('A', cx, cy + R + 20);
        ctx.fillText('B', cx - 20, cy - R);

        // 5. Draw Radius 'R' label in 2nd quadrant
        const angleR = 135 * Math.PI / 180; // 135 degrees
        const endX = cx + R * Math.cos(angleR);
        const endY = cy + R * Math.sin(-angleR); // Invert y for canvas coords
        
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(endX, endY);
        ctx.stroke();

        // Arc for radius R
        ctx.beginPath();
        ctx.arc(cx, cy, R * 0.3, -Math.PI / 2, -angleR, true); // from y-axis to radius line (CCW)
        ctx.stroke();
        ctx.fillText('R', cx - R*0.4, cy - R*0.4);

        // 6. Draw Point Mass
        const massRadius = 6;
        ctx.beginPath();
        ctx.arc(cx + R, cy, massRadius, 0, 2 * Math.PI);
        ctx.fill();
        
        // 7. Draw mass label 'm = 5/4 M'
        const labelX = cx + R + 25;
        const labelY = cy - 40;
        
        // Leader line
        ctx.beginPath();
        ctx.moveTo(labelX + 15, labelY + 15);
        ctx.quadraticCurveTo(cx + R + 10, cy, cx + R + massRadius, cy);
        ctx.stroke();

        // Text and Fraction
        ctx.textAlign = 'left';
        ctx.fillText("m =", labelX, labelY + 5);
        
        const fracX = labelX + ctx.measureText("m = ").width;
        const fracY = labelY;
        
        ctx.save();
        ctx.font = "italic 16px Times New Roman";
        ctx.textAlign = "center";
        ctx.fillText("5", fracX + 8, fracY);
        ctx.fillText("4", fracX + 8, fracY + 16);
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.moveTo(fracX + 2, fracY + 8);
        ctx.lineTo(fracX + 14, fracY + 8);
        ctx.stroke();
        ctx.restore();

        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText("M", fracX + 22, labelY + 5);


        // 8. Draw Figure Caption
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.109.', cx, canvas.height - 20);

    </script>
</body>
</html>